<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from 'echarts'
 
// 流量模块
const gaugeData = ref([
    {
        value: 20,
        name: '企业流量',
        title: {
            offsetCenter: ['0%', '-40%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-25%']
        }
    },
    {
        value: 40,
        name: '个体流量',
        title: {
            offsetCenter: ['0%', '-5%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '10%']
        }
    },
    {
        value: 60,
        name: '政府流量',
        title: {
            offsetCenter: ['0%', '30%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '45%']
        }
    }
])

//流量模块
const initGaugeChart = () => {
    const charts = echarts.init(document.querySelector('.gauge2'))
    const option = {
        series: [
            {
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#464646'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 40
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: gaugeData.value,
                title: {
                    fontSize: 14,
                    color: '#fff'
                },
                detail: {
                    width: 80,
                    height: 14,
                    fontSize: 14,
                    color: 'inherit',
                    borderColor: 'inherit',
                    borderRadius: 20,
                    borderWidth: 1,
                    formatter: '{value}%GB'
                }
            }
        ]
    }
    setInterval(function () {
        const charts = echarts.init(document.querySelector('.gauge2'))
        gaugeData.value[0].value = +(Math.random() * 100).toFixed(2);
        gaugeData.value[1].value = +(Math.random() * 100).toFixed(2);
        gaugeData.value[2].value = +(Math.random() * 100).toFixed(2);
        charts.setOption({
            series: [
                {
                    data: gaugeData.value,
                    pointer: {
                        show: false
                    }
                }
            ]
        });
    }, 2000);

    charts.setOption(option)
}
// 柱形图
const initLineChart = () => {
    const charts = echarts.init(document.querySelector('.line'))
    const option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['上行吞吐量', '下行吞吐量'],
            // 图例文字
            textStyle: {
                color: '#4c9bfd',
            }
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        // 修改刻度颜色
        axisLabel: {
            color: '#4c9bfd',
            fontSize: 10
        },


        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '上行吞吐量',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [620, 732, 701, 834, 890, 830, 910]
            },
            {
                name: '下行吞吐量',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [520, 582, 691, 734, 790, 830, 810]
            }
        ]
    };
    charts.setOption(option)
}


onMounted(() => {
    initGaugeChart()
    initLineChart()
})




</script>

<template>
    <div class="viewport">
        <div class="column">
            <div class="panel traffic">
                <div class="inner">
                    <h3 style="position: absolute;">综合流量</h3>
                    <div class="chart">
                        <div class="gauge2" ref="gauge2"></div>
                    </div>
                </div>
            </div>
            <div class="Throughput">
                <div class="chart">
                    <h3 style="margin-left: 20px;">上下行吞吐量趋势</h3>
                    <div class="line" ref="line"></div>
                </div>
            </div>
        </div>
        <!-- <div class="column">
            <div class="panel geo">
                <div class="inner">
                    <h3>地图</h3>
                </div>
            </div>

        </div> -->
    </div>
</template>

<style scoped lang="scss">
li {
    list-style: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
}

.viewport {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    // padding: 88px 20px 0;
    min-height: 1080px;
    // overflow: hidden;

    .column {
        flex: 2;
        margin: 0 20px;

        .panel {
            position: relative;
            border: 15px solid transparent;
            border-width: 51px 38px 20px 132px;
            border-image-source: url(@/assets/border.png);
            border-image-slice: 51 38 20 132;
            margin-bottom: 20px;

            h3 {
                font-size: 20px;
                color: #fff;
                font-weight: 400;
            }

            .inner {
                position: absolute;
                top: -51px;
                left: -132px;
                right: -38px;
                bottom: -20px;
                padding: 24px 36px;
                // background-color: red;

                .row {
                    display: flex;
                    justify-content: space-between;
                    line-height: 1.05;
                    font-size: 12px;
                    color: #61a8ff;
                    margin-top: 20px;
                    // padding: 12px 36px;

                }
            }
        }

    }


}


// 综合流量
.traffic {
    height: 500px;

    .chart {
        display: flex;
        justify-content: center;
        margin-top: 0;
        // background-color: red;

        .gauge2 {
            width: 500px;
            height: 480px;
        }
    }

}

.Throughput {
    margin-top: 20px;
    position: absolute;
    display: flex;
    height: 550px;
    width: 1440px;
    // background-color: red;

    .line {
        height: 450px;
        width: 1440px;
    }
}

.geo {
    height: 500px
}
</style>